<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body,html{
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
		}
		.main{
			 overflow-y: auto;
			display: flex;
			width: 100%;
			height: 100%;
			margin: 0;
		}
		.main::-webkit-scrollbar {
		  width: 0.5px; /* 设置滚动条的宽度，可以根据需要调整 */
		}
		.main::-webkit-scrollbar-track {
		  background-color: transparent; /* 设置滚动条轨道的背景色，这里设置为透明 */
		}
		
		.main::-webkit-scrollbar-thumb {
		  background-color: #808080; /* 设置滚动条的颜色，这里设置为灰色 */
		}
		.content{
			width: 80%;
			height: 600%;
			background-color: aqua;
		}
		.side{
			width: 20%;
			height: 150%;
			background-color: blue;
		}
		.content-item{
			width: 80%;
			height: 20%;
			background-color: black;
			margin: 10%;
		}
		.side-item{
			width: 80%;
			height: 10%;
			margin: 10%;
			background-color: aquamarine;
		}
	</style>
	<body>
		<div class="main" id="container">
			<div class="content" id="content">
				<div class="content-item">
					
				</div>
				<div class="content-item">
					
				</div>
				<div class="content-item">
					
				</div>
			</div>
			<div class="side" id="fixedContent">
				<div class="side-item">
					
				</div>
				
				<div class="side-item">
					
				</div>
				
				<div class="side-item">
					
				</div>
				
				<div class="side-item">
					
				</div>
				
				<div class="side-item">
					
				</div>
				
				<div class="side-item">
					
				</div>
				
				<div class="side-item">
					
				</div>
			</div>
		</div>
		
		<script>
			addContainer();
			function addContainer(){
			
				let container = document.getElementById("container");
				const aElement = document.getElementById("content");
				let bElement = document.getElementById("fixedContent");
				container.addEventListener("scroll", function() {
					  const containerHeight = container.clientHeight;
					  const contentHeight = container.scrollHeight;
					  const scrollTop = container.scrollTop;
					  
					  if (scrollTop + containerHeight >= bElement.offsetHeight) {
						  
						var rect = aElement.getBoundingClientRect();
					    // 到达b元素底部，固定b元素
					    bElement.style.position = "fixed";
						bElement.style.left=rect.right+"px";
					    bElement.style.top = containerHeight - bElement.offsetHeight + "px";
					  } else {
					    // 未到达b元素底部，取消固定
					    bElement.style.position = "static";
					  }
				});
			}
			
			
		</script>
	</body>
</html>